import React, { forwardRef, useState, useImperativeHandle, ChangeEvent, useRef } from 'react';
import { Button, Modal, Input, Table, Space, Form, Pagination, Select, Radio, Image, Upload, DatePicker, Divider, DatePickerProps, TreeSelect, Switch } from 'antd';
import { WomanOutlined, ManOutlined, PlusOutlined } from '@ant-design/icons';
import SmartMap from '../../../components/smart-map';
import systemApi from '../../../api/system';

interface Props {
    showTitle?: boolean
    onFinish?: Function
};

const { TextArea } = Input;
const { RangePicker } = DatePicker;

const SmartMapModal = (props: Props, ref: any) => {
    useImperativeHandle(ref, () => ({
        openModal: openModal
    }));

    const {
        onFinish
    } = props;

    const smartMapRef = useRef(null);
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [submitLoading, setSubmitLoading] = useState(false);

    const openModal = () => {
        setIsModalOpen(true);
    };
    const handleConfirm = async () => {
        try {

        } catch (errorInfo) {
        }
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    };

    return (
        <Modal
            title={"自然保护地空间数据分析"}
            open={isModalOpen}
            onOk={handleConfirm}
            onCancel={handleCancel}
            okText={'确 认'}
            cancelText={'取 消'}
            width={'93%'}
            maskClosable={false}
            confirmLoading={submitLoading}
            centered
        >
            <div 
                style={{ height: '93vh', marginTop: '-20px' }} 
                className='custom-modal-container'
            >
                <SmartMap
                    ref={smartMapRef}
                    initMapCenter={[100.169970, 25.778000]}
                    initMapZoom={10.5}
                    uploadActionUrl='http://81.71.141.254:8003/shp-file-upload'
                    mapMountingRootId={'SmartMapModalId'}
                    tdt_map_token="28d4225e9cfba24cdc7e972a0935407a"
                    mapbox_token="pk.eyJ1IjoiZmVuZ3NoZW5nIiwiYSI6ImNsMHRxMWg1OTBkanUza24zMnA0NDIzY2YifQ.cj3kVyGgJnLmKnVz6pX4ag"
                    addMapLayerPromiseFunc={systemApi.addMapLayer}
                    editMapLayerPromiseFunc={systemApi.editMapLayer}
                    deleteMapLayerPromiseFunc={systemApi.deleteMapLayer}
                    queryMapLayerPromiseFunc={systemApi.qeuryMapLayer}
                    pageParamsTag={'page'}
                    defaultMapLayerPid={'0'}
                />
            </div>
        </Modal>
    )
}


export default forwardRef(SmartMapModal);